<template>
  <div>
    <div class="content-section">
      <el-button type="primary" size="medium" @click="getDeviceId">申请实验箱</el-button>
      <!--      <p style="text-align: left;padding-left: 50px">当前实验箱使用数量： </p>-->
    </div>
    <div class="content-section even">
      <el-row>
        <el-col :span="24">
          <el-col :span="15">
            <div class="isfull">
              <div id="video" class="video-content"></div>
            </div>
          </el-col>
          <el-col :span="9" style="padding: 50px">
            <div class="content">
              <h2>上传代码</h2>
              <el-card class="box-card">
                <p>{{this.burningInformation}}</p>
              </el-card>
              <el-upload
                :action="getMediaUrl"
                :headers="headers"
                :data="{deviceId: this.deviceList.deviceId}"
                :show-file-list="false"
                :on-progress="onProgress"
                :on-success="onSuccess"
                :file-list="codeFileList">
                <el-tooltip effect="dark" content="上传代码" placement="top" :enterable="false">
                  <el-button type="primary" icon="el-icon-upload" size="medium">上传代码</el-button>
                </el-tooltip>
              </el-upload>
            </div>
          </el-col>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
const CKplayer = window.ckplayer
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      player: null,
      videoObject: {
        container: '.video-content', // 容器的ID或className
        variable: 'player', // 播放函数名称
        autoplay: true, // 是否自动播放
        crossorigin: '',
        live: true // 是否是直播视频 true = 直播，false = 点播}
      },
      getMediaUrl: 'http://cn1.utools.club:41547/getMediaUrl',
      mediaUrl: '',
      codeFileList: [],
      codeUploadUrl: '',
      headers: {
        Authorization: window.sessionStorage.getItem('token')
      },
      deviceList: [],
      burningInformation: ''
    }
  },
  computed: {},
  watch: {},
  beforeCreate () { },
  created () { },
  beforeMount () { },
  mounted () {
  },
  beforeUpdate () { },
  updated () {
  },
  activated () { },
  deactivated () { },
  beforeDestroy () { },
  destroyed () { },
  methods: {
    // 申请设备
    async getDeviceId () {
      const { data: res } = await this.$http.post('/getDeviceId')
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取设备信息失败' + res.data.msg)
      const deviceList = res.data
      this.deviceList = deviceList.data
      console.log(deviceList)
      this.$message.success('获取设备信息成功')
    },
    // 轮询查看烧录信息
    async onProgress () {
      window.timer = setInterval(() => {
        setTimeout(this.pollingInformation, 0)
      }, 5000)
    },
    // 查看烧录信息
    async pollingInformation () {
      const { data: res } = await this.$http.post('/pollingInformation', { deviceId: this.deviceList.deviceId })
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取信息失败' + res.data.msg)
      this.burningInformation = res.data.data
      console.log(this.burningInformation)
    },
    // 文件上传成功后获取流媒体链接
    async onSuccess (res) {
      this.$message.success(res.data.msg)
      this.mediaUrl = res.data.mediaUrl
      console.log(this.mediaUrl)
      clearInterval(window.timer)
      var videoObject = {
        ...this.videoObject,
        video: this.mediaUrl, // 烧录成功后获取的rtmp流
        // video: 'rtmp://58.200.131.2:1935/livetv/ahtv',
        // video: 'rtmp://39.98.126.208:1935/live/home',
        container: '#video'
      }
      this.player = new CKplayer(videoObject)
    }
  }
}
</script>

<style scoped>
.video-content,.is-full {
  height: 500px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  height: 260px;
  margin-bottom: 10px;

}
</style>
